<template>
  <div class>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>企业人员</span>
      </div>
      <el-table :data="entperson" border style="width: 100%" size="mini">
        <el-table-column align="center" width="30">
          <template slot="header">
            <el-button
              class="el-icon-circle-plus"
              style="padding:0"
              type="text"
              @click.prevent="addRow1()"
            ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              style="padding:0"
              class="el-icon-remove"
              @click="handleDelete1(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column label="姓名" align="center" prop="peoName" min-width="100"></el-table-column>
        <el-table-column label="性别" align="center" min-width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.sex==1">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column label="证件类型" align="center" min-width="120">
          <template slot-scope="scope">
            <div v-for="item in ide" :key="item.value">
              <span v-if="item.value==scope.row.ide">{{item.label}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="证件号码" align="center" prop="ideCard" min-width="150"></el-table-column>
        <el-table-column label="移动电话" align="center" prop="telephone" min-width="150"></el-table-column>
        <el-table-column label="人员类别" align="center" min-width="120">
          <template slot-scope="scope">
            <div v-for="item in personType" :key="item.value">
              <span v-if="item.value==scope.row.personType">{{item.label}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="婚姻状况" align="center" min-width="80">
          <template slot-scope="scope">
            <div v-for="item in maritalStatus" :key="item.value">
              <span v-if="item.value==scope.row.maritalStatus">{{item.label}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学历" align="center" min-width="80">
          <template slot-scope="scope">
            <div v-for="item in education" :key="item.value">
              <span v-if="item.value==scope.row.education">{{item.label}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="家庭地址" align="center" prop="address" min-width="150"></el-table-column>
        <el-table-column label="备注" align="center" prop="remark" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="mini">查看</el-button>
            <el-button type="text" size="mini" @click="edit(scope.$index,scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog width="70%" :title="persontitle" :visible.sync="dialogFormVisible">
      <el-form size="mini" inline :model="person" :rules="rules" ref="person" label-width="80px">
        <my-form-item label="姓名" prop="peoName">
          <el-input
            v-model="person.peoName"
            autocomplete="off"
            :disabled="personDisabel"
            style="width: 200px;"
          ></el-input>
        </my-form-item>

        <my-form-item label="性别">
          <el-select
            v-model="person.sex"
            autocomplete="off"
            :disabled="personDisabel"
            style="width: 200px;"
          >
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="证件类型">
          <enum-selector
            v-model="person.ide"
            code="card_1"
            enabledState="1"
            clearable="1"
            placeholder="请输入证件类型"
          ></enum-selector>
          <!-- <el-select v-model="person.ide" placeholder="请选择" :disabled="personDisabel" style="width: 200px;" >
            <el-option
              v-for="item in ide"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>-->
        </my-form-item>

        <my-form-item label="证件号码" prop="ideCard">
          <el-input
            v-model="person.ideCard"
            autocomplete="off"
            :disabled="personDisabel"
            style="width: 200px;"
          ></el-input>
        </my-form-item>

        <my-form-item label="移动电话" prop="telephone">
          <el-input
            v-model="person.telephone"
            autocomplete="off"
            :disabled="personDisabel"
            style="width: 200px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="人员类别">
          <el-select
            v-model="person.personType"
            style="width: 200px;"
            :disabled="personDisabel"
            placeholder="请选择"
          >
            <el-option
              v-for="item in personType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="婚姻状况">
          <el-select
            v-model="person.maritalStatus"
            style="width: 200px;"
            :disabled="personDisabel"
            placeholder="请选择"
          >
            <el-option
              v-for="item in maritalStatus "
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="学历">
          <el-select
            v-model="person.education"
            style="width: 200px;"
            :disabled="personDisabel"
            placeholder="请选择"
          >
            <el-option
              v-for="item in education"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="家庭住址">
          <el-input
            v-model="person.address"
            autocomplete="off"
            :disabled="personDisabel"
            style="width:800px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="备注">
          <el-input
            v-model="person.remark"
            type="textarea"
            autocomplete="off"
            style="width:800px;"
            :disabled="personDisabel"
          ></el-input>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button :disabled="personDisabel" type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>其他人员</span>
      </div>
      <el-table :data="entOther" border style="width: 100%" size="mini">
        <el-table-column align="center" width="30">
          <template slot="header">
            <el-button
              class="el-icon-circle-plus"
              style="padding:0"
              type="text"
              @click.prevent="addRow2()"
            ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              class="el-icon-remove"
              style="padding:0"
              @click="handleDelete2(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column label="姓名" align="center" prop="peoName" min-width="100"></el-table-column>
        <el-table-column label="性别" align="center" min-width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.sex==1">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column label="证件类型" align="center" min-width="120">
          <template slot-scope="scope">
            <div v-for="item in ide" :key="item.value">
              <span v-if="item.value==scope.row.ide">{{item.label}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="证件号码" align="center" prop="ideCard" min-width="150"></el-table-column>
        <el-table-column label="年龄" align="center" prop="age" min-width="80"></el-table-column>
        <el-table-column label="学历" align="center" min-width="120">
          <template slot-scope="scope">
            <div v-for="item in education" :key="item.value">
              <span v-if="item.value==scope.row.education">{{item.label}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="工作单位" align="center" prop="workUnit" min-width="150"></el-table-column>
        <el-table-column label="家庭地址" align="center" prop="address" min-width="150"></el-table-column>
        <el-table-column label="移动电话" align="center" prop="telephone" min-width="120"></el-table-column>
        <el-table-column label="备注" align="center" prop="remark" min-width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="otherHandleClick(scope.row)" type="text" size="mini">查看</el-button>
            <el-button type="text" size="mini" @click="editOther(scope.$index,scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog width="70%" :title="otherTitle" :visible.sync="otherDialogVisible">
      <el-form size="mini" inline :model="other" :rules="rules" ref="person" label-width="80px">
        <my-form-item label="姓名" prop="peoName">
          <el-input v-model="other.peoName" autocomplete="off" :disabled="otherDisabel"></el-input>
        </my-form-item>

        <my-form-item label="性别">
          <el-select
            v-model="other.sex"
            autocomplete="off"
            :disabled="otherDisabel"
            style="width: 200px;"
          >
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="证件类型">
          <el-select
            v-model="other.ide"
            placeholder="请选择"
            :disabled="otherDisabel"
            style="width: 200px;"
          >
            <el-option
              v-for="item in ide"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="证件号码" prop="ideCard">
          <el-input
            v-model="other.ideCard"
            autocomplete="off"
            :disabled="otherDisabel"
            style="width: 200px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="年龄" prop="ideCard">
          <el-input
            v-model="other.age"
            autocomplete="off"
            :disabled="otherDisabel"
            style="width: 200px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="学历">
          <el-select
            v-model="other.education"
            style="width: 200px;"
            :disabled="otherDisabel"
            placeholder="请选择"
          >
            <el-option
              v-for="item in education"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="工作单位">
          <el-input
            v-model="other.workUnit"
            autocomplete="off"
            :disabled="otherDisabel"
            style="width:800px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="家庭住址">
          <el-input
            v-model="other.address"
            autocomplete="off"
            :disabled="otherDisabel"
            style="width:800px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="移动电话" prop="telephone">
          <el-input
            v-model="other.telephone"
            autocomplete="off"
            :disabled="otherDisabel"
            style="width: 200px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="备注">
          <el-input
            v-model="other.remark"
            type="textarea"
            autocomplete="off"
            style="width:800px;"
            :disabled="otherDisabel"
          ></el-input>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="otherCancle">取 消</el-button>
        <el-button :disabled="otherDisabel" type="primary" @click="otherHandleAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EnumSelector from "@/pages/comm/enumSelector";
export default {
  components: {
    EnumSelector
  },
  data() {
    return {
      otherTitle: "新增其他人员", //其他人员弹出表单标题
      otherDialogVisible: false, //控制其他人员表单是否弹出
      otherDisabel: false, //控制其他人员表单是否可编辑
      otherEdit: false, //用于判断其他人员是否属于修改还是新增
      otherIndex: 0, //记录其他人员信息修改行号
      personEdit: false, //用于判断企业人员是否属于修改还是新增
      personIndex: 0, //记录企业人员信息修改行号
      personDisabel: false, //控制企业人员表单是否可编辑
      dialogFormVisible: false, //控制企业人员表单弹出框是否显示
      persontitle: "新增企业人员",
      entperson: [],
      person: {}, //企业人员表单信息
      entOther: [],
      other: {}, //其他人员表单信息
      sex: [{ label: "男", value: "1" }, { label: "女", value: "2" }],
      ide: [
        { label: "居民身份证", value: "1" },
        { label: "护照", value: "2" },
        { label: "营业执照号", value: "3" },
        { label: "其他", value: "4" }
      ],
      personType: [
        { label: "法定代表人", value: "1" },
        { label: "实际控制人", value: "2" },
        { label: "财务负责人", value: "3" },
        { label: "常用联系人", value: "4" },
        { label: "其他", value: "5" }
      ],
      maritalStatus: [
        { label: "已婚", value: "1" },
        { label: "未婚", value: "2" },
        { label: "离异", value: "3" },
        { label: "未知（适用诉讼保全业务）", value: "4" }
      ],
      education: [
        { label: "大专以下", value: "1" },
        { label: "大专", value: "2" },
        { label: "本科", value: "3" },
        { label: "研究生及以上", value: "4" }
      ],
      rules: {
        peoName: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        ideCard: [
          { required: true, message: "证件号码不能为空", trigger: "blur" }
        ],
        telephone: [
          {
            pattern: /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  mounted() {},
  methods: {
    selectTargetEnum: function(data) {
      if (data.length > 0) {
        this.person.ide = data[0].codeValue;
      } else {
        this.person.ide = "";
      }
    },
    //企业人员表单窗口取消操作
    cancle() {
      this.person = {};
      this.dialogFormVisible = false;
    },
    //修改企业人员信息
    edit(index, row) {
      this.person = row;
      this.personEdit = true;
      this.personIndex = index;
      this.dialogFormVisible = true;
      this.persontitle = "修改企业人员信息";
      this.personDisabel = false;
    },
    //查看企业人员明细信息
    handleClick(row) {
      this.person = row;
      this.dialogFormVisible = true;
      this.persontitle = "企业人员详细信息";
      this.personDisabel = true;
    },
    //新增企业人员表单确认
    handleAdd() {
      if (this.personEdit) {
        //判断是否属于修改，是修改先删除之前的数据再添加
        this.entperson.splice(this.personIndex, 1);
        this.personEdit = false;
      }
      this.$refs.person.validate(valid => {
        if (valid) {
          this.entperson.unshift(this.person);
          this.cancle();
        } else {
          return false;
        }
      });
    },
    //获取企业人员信息
    getEntPersonData() {
      return this.entperson;
    },
    //获取其他人员信息
    getEntOtherData() {
      return this.entOther;
    },
    getData(entId) {
      this.$api
        .formPost("/api/biz/entPerson/doGetList", {
          entId
        })
        .then(res => {
          console.log(res);
          if (res.retHead.code == "0000000") {
            let persons = res.retBody.list;
            for (var i = 0; i < persons.length; i++) {
              if (persons[i].status == "2") {
                this.entOther.push(persons[i]);
              } else {
                this.entperson.push(persons[i]);
              }
            }
          } else {
            this.$message({
              type: "error",
              message: res.retHead.message
            });
          }
        });
    },
    doSave(id, path, name) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.$api
          .post("/api/biz/entPerson/doSubmit", {
            entPersonList: that.entperson,
            entOtherList: that.entOther,
            entId: id,
            applicationPath: path,
            componentName: name
          })
          .then(res => {
            if (res.retHead.code == "0000000") {
              // that.$message.success(res.retHead.message);
              resolve(res.retBody);
            } else {
              that.$message.error(res.retHead.message);
            }
          });
      });
    },
    // 增加企业人员行
    addRow1() {
      this.dialogFormVisible = true;
      this.persontitle = "新增企业人员信息";
      this.personDisabel = false;
      this.person.status = "1";
      this.person.sex = "1";
      this.person.ide = "1";
      this.person.personType = "1";
    },
    //删除企业人员行
    handleDelete1(index, row) {
      this.entperson.splice(index, 1);
    },
    //其他人员表单窗口取消操作
    otherCancle() {
      this.other = {};
      this.otherDialogVisible = false;
    },
    //修改其他人员信息
    editOther(index, row) {
      this.other = row;
      this.otherEdit = true;
      this.otherIndex = index;
      this.otherDialogVisible = true;
      this.otherTitle = "修改其他人员信息";
      this.otherDisabel = false;
    },
    //查看企业人员明细信息
    otherHandleClick(row) {
      this.other = row;
      this.otherDialogVisible = true;
      this.otherTitle = "其他人员详细信息";
      this.otherDisabel = true;
    },
    //新增企业人员表单确认
    otherHandleAdd() {
      if (this.otherEdit) {
        //判断是否属于修改，是修改先删除之前的数据再添加
        this.entOther.splice(this.otherIndex, 1);
        this.otherEdit = false;
      }
      this.entOther.unshift(this.other);
      this.otherCancle();
    },
    // 增加其他人员行
    addRow2() {
      this.otherDialogVisible = true;
      this.otherTitle = "新增其他人员信息";
      this.otherDisabel = false;
      this.other.status = "2";
      this.other.sex = "1";
      this.other.ide = "1";
    },
    //删除其他人员行
    handleDelete2(index, row) {
      this.entOther.splice(index, 1);
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
</style>